Angular Material এর Expansion Panel কম্পোনেন্টটি একটি খুবই ব্যবহারযোগ্য উপাদান, যা আপনি কোন কন্টেন্ট অথবা ইনফরমেশন গ্রুপকে এক্সপ্যান্ড বা কোলাপ্স (expand or collapse) করতে ব্যবহার করতে পারেন। এক্সপ্যানশন প্যানেল গ্রুপিং (Expansion Panel Grouping) ব্যবহার করে আপনি একাধিক এক্সপ্যানশন প্যানেলকে একটি গ্রুপে রাখতে পারেন, যেখানে একাধিক প্যানেল একসাথে এক্সপ্যান্ড বা কোলাপ্স করা যায়।

এখানে, আমরা দেখব কিভাবে Angular Material Expansion Panel গ্রুপিং করা যায় এবং এর কার্যপ্রণালী কিভাবে কাজ করে।

প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatExpansionModule ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

app.module.ts ফাইলে MatExpansionModule ইমপোর্ট করুন:

import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatExpansionModule,
    MatButtonModule
  ]
})
export class AppModule { }

এক্সপ্যানশন প্যানেল গ্রুপিং

এখন, mat-expansion-panel ব্যবহার করে একাধিক প্যানেলকে একটি গ্রুপে রাখা হবে, যেখানে একসাথে একাধিক প্যানেল এক্সপ্যান্ড বা কোলাপ্স করা যাবে।

২. HTML টেমপ্লেট

এখানে, আমরা একাধিক এক্সপ্যানশন প্যানেল ব্যবহার করেছি, এবং একটি mat-accordion ব্যবহার করে প্যানেলগুলোকে গ্রুপ করা হয়েছে।

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded1">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 1</p>
    <button mat-button (click)="togglePanel(1)">Toggle Panel 1</button>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="isExpanded2">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 2</p>
    <button mat-button (click)="togglePanel(2)">Toggle Panel 2</button>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="isExpanded3">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 3
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 3</p>
    <button mat-button (click)="togglePanel(3)">Toggle Panel 3</button>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

• mat-accordion: এটি এক্সপ্যানশন প্যানেলগুলোকে একটি গ্রুপে রাখে, এবং [expanded] প্রপার্টি ব্যবহার করে আপনি কন্ট্রোল করতে পারবেন কোন প্যানেলটি এক্সপ্যান্ড বা কোলাপ্স হবে।
• togglePanel(): একটি কাস্টম ফাংশন যা প্যানেল এক্সপ্যান্ড বা কোলাপ্স করে।

৩. TypeScript কোড

এখন, togglePanel() ফাংশনটি তৈরি করতে হবে যা প্যানেলগুলোর এক্সপ্যান্ড স্টেট পরিবর্তন করবে। এই ফাংশনটি প্যানেল নং অনুযায়ী স্টেট চেক করবে এবং সেই অনুযায়ী এক্সপ্যান্ড/কোলাপ্স করবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isExpanded1: boolean = false;
  isExpanded2: boolean = false;
  isExpanded3: boolean = false;

  togglePanel(panelNumber: number) {
    switch (panelNumber) {
      case 1:
        this.isExpanded1 = !this.isExpanded1;
        break;
      case 2:
        this.isExpanded2 = !this.isExpanded2;
        break;
      case 3:
        this.isExpanded3 = !this.isExpanded3;
        break;
    }
  }
}

এখানে:

• isExpanded1, isExpanded2, isExpanded3: প্রতিটি এক্সপ্যানশন প্যানেলের জন্য একটি বুলিয়ান ভেরিয়েবল, যা প্যানেলের এক্সপ্যান্ড স্টেট নির্দেশ করে।
• togglePanel(): এই ফাংশনটি ব্যবহারকারীর ক্লিক করার সময় প্যানেলগুলোর এক্সপ্যান্ড স্টেট পরিবর্তন করবে।

একাধিক প্যানেল একসাথে এক্সপ্যান্ড/কোলাপ্স করা

আপনি চাইলে একসাথে একাধিক প্যানেল এক্সপ্যান্ড বা কোলাপ্স করার জন্য একটি ফাংশন ব্যবহার করতে পারেন।

expandAllPanels() {
  this.isExpanded1 = true;
  this.isExpanded2 = true;
  this.isExpanded3 = true;
}

collapseAllPanels() {
  this.isExpanded1 = false;
  this.isExpanded2 = false;
  this.isExpanded3 = false;
}

এটি expandAllPanels() এবং collapseAllPanels() ফাংশন তৈরি করবে, যা একসাথে সমস্ত প্যানেল এক্সপ্যান্ড বা কোলাপ্স করতে সাহায্য করবে।

আপনি এই ফাংশনগুলিকে একটি বাটনের সাথে সংযুক্ত করতে পারেন:

<button mat-button (click)="expandAllPanels()">Expand All</button>
<button mat-button (click)="collapseAllPanels()">Collapse All</button>

স্টাইলিং (CSS)

Angular Material এক্সপ্যানশন প্যানেলের জন্য ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি কাস্টম CSS ব্যবহার করে প্যানেল এবং এর কনটেন্ট কাস্টমাইজ করতে পারেন।

mat-expansion-panel {
  margin: 10px 0;
}

mat-panel-title {
  font-weight: bold;
}

mat-expansion-panel-header {
  background-color: #f1f1f1;
}

এখানে, mat-expansion-panel এর জন্য মার্জিন, mat-panel-title এর জন্য ফন্ট ওয়েট এবং mat-expansion-panel-header এর ব্যাকগ্রাউন্ড কাস্টমাইজ করা হয়েছে।

Angular Material Expansion Panel এবং Accordion কম্পোনেন্টগুলি ব্যবহার করে আপনি সহজেই একাধিক প্যানেল তৈরি করতে পারেন এবং তাদের মধ্যে এক্সপ্যান্ড/কোলাপ্স করার ফিচার যোগ করতে পারেন। mat-accordion এর সাহায্যে আপনি একসাথে একাধিক প্যানেল গ্রুপ করতে পারেন এবং [expanded] প্রপার্টি ব্যবহার করে প্যানেলের এক্সপ্যান্ড স্টেট কন্ট্রোল করতে পারেন। এটি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং কার্যকরী ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।